<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 轮播图管理</el-breadcrumb-item>
                <el-breadcrumb-item>首页轮播</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-button size="small" type="primary" style="margin-bottom:5px"  @click="handleAdd()">新增</el-button>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="bannerName" label="轮播图名称" sortable width="160">
            </el-table-column>

            <el-table-column prop="redirectUrl" label="跳转链接地址" width="120">
            </el-table-column>

            <el-table-column   label="位置" :formatter="formatter">
             <template scope="scope">
               {{scope.row.location==0?"首页轮播":"赛事轮播"}}
                </template>
            </el-table-column>

             <el-table-column  label="图片" :formatter="formatter">
               <template scope="scope">
          
                    <img style='width:50px;height:50px;' :src="$prefix+scope.row.imgUrl"></img>
                </template>
            </el-table-column>

    
            
            <el-table-column label="操作" width="180">
                <template scope="scope">
                    <el-button size="small"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change="handleCurrentChange"
                    layout="total,prev, pager, next"
                    :current-page.sync="currentPage"
                    :total="total">
            </el-pagination>
        </div>

        <!--预设区-->
        <div>
              <el-dialog title="新增轮播图" v-model="formVisible" >
                <el-form :model="banner"  :rules="rules" ref="banner">
                    <el-form-item  label="轮播图名称" prop="bannerName">
                        <el-input v-model="banner.bannerName" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item  label="跳转链接">
                        <el-input v-model="banner.redirectUrl" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item  label="图片路径" prop="imgUrl">
                        <el-input v-model="banner.imgUrl" disabled  auto-complete="off"></el-input>
                    </el-form-item>
                   
                    <el-form-item  label="图片">
                        <img style="width:50px;height:50px;" class="pre-img" v-if="banner.imgUrl" :src="$prefix+banner.imgUrl" alt="">
                        <el-upload
                                :action="this.$api('Banner')+'uploadBanner'"
                                :multiple="false"
                                type="drag"
                                :drag="true"
                                name="bannerImg"
                                :on-progress="uploading"
                                :thumbnail-mode="true"
                                :on-error="uploadError"
                                :on-success="uploadSuccess"
                                :show-file-list="false"
                        >
                            <i class="el-icon-upload"></i>
                            <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                    
                
                    <el-form-item  label="排序">
                        <el-input-number v-model="banner.sort"  :min="1" :max="100"></el-input-number>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="formVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addBanner('banner')">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</template>

<script>
    import { Loading } from 'element-ui';
    export default {
        data() {
            return {
                banner:{
                    bannerId:-1,
                    bannerName:"",
                    redirectUrl:"",
                    sort:"",
                    gameId:0,
                    location:0,
                    imgUrl:""
                },
                total:0,
                currentPage:1,
                tableData: [],
                formVisible:false,
                rules: {
                    bannerName: [
                        { required: true, message: '请输入banner名', trigger: 'blur' }
                    ],
                    imgUrl: [
                        { required: true, message: '请先上传图片', trigger: 'blur' }
                    ]

                }
            }
        },
        methods: {
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleCurrentChange(currentPage){
                console.log(currentPage);
                let self = this;
                self.currentPage = currentPage;
                self.getData();

            },
            handleAdd(index,row){

               
                this.action="add";
                this.banner={
                   bannerId:-1,
                    bannerName:"",
                    redirectUrl:"",
                    sort:"",
                    gameId:0,
                    location:0,
                    imgUrl:""
                }
                 this.formVisible=true;

            },
            handleEdit(index,row){
                let self = this;
                let params = {
                    bannerId : row.bannerId
                }
                console.log(row.bannerId);
                 self.$req.pget(self.$api("Banner")+"getBanner",self,function(res){
                    self.banner=res.data.data;
                    console.log(self.banner);
                    
                },params,true)
               
                this.action="edit";
                
                this.formVisible=true;

            },
            handleDelete(index, row) {
                 let self = this;
                let params = {
                    bannerId : row.bannerId
                }
                 this.$confirm('是否删除该banner图?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                         console.log(row.bannerId);
                        self.$req.pdel(self.$api("Banner")+"deleteBanner",self,function(res){

                            self.getData();
                            
                        },params,true)
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
                
                //this.$message.error('删除第'+(index+1)+'行');
            },
            getData(){
                let self = this;
                let params = {
                    gameId:0,
                    location:0,
                    page:self.currentPage
                }
                console.log(params);

                 self.$req.pget(self.$api("Banner")+"bannerList",self,function(res){
                     
                    self.tableData = res.data.data.content;
                     self.total = res.data.data.totalElements;
                    console.log(self.tableData);
                    
                },params,true)
            },
            uploading(res){
                this.loading=Loading.service({target:document.body,fullscreen:true,text:"拼命加载中~"});
            },
            uploadSuccess(res){
                this.loading&&this.loading.close();
                console.log(res);
                this.banner.imgUrl=res.data;
            },
            uploadError(){
                this.loading&&this.loading.close();
                this.$notify.error({
                    title: '上传失败',
                    message: '图片上传接口上传失败'
                });
            },
             addBanner(formName){
                let self = this;


                 self.$refs[formName].validate((valid) => {
                     console.log(valid);
                     if (valid) {
                         self.formVisible = false;
                         let data = self.banner;
                         data.bannerName = encodeURI(data.bannerName);
                         self.$req.ppost(self.$api("Banner")+"saveBanner",self,function(res){
                             self.getData();
                         },data,true)
                     }
                     else {

                         return false;
                     }
                 });
            }
           



        },
        mounted:function(){
            this.getData();
        }
    }
</script>